<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加货币</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        body,
        html {
            background: #f6f6fa;
        }

        .step-head {
            padding: 24px 0;
            background: url(../../image/audit/stepback.png) no-repeat;
            background-size: 100%;
        }

        .step-img {
            padding: 0 28px;
        }

        .step-img>img {
            width: 100%;
        }

        .step-head-text {
            padding: 0 14px;
            margin-top: 12px;
            overflow: hidden;
            font-size: 12px;
            color: #fff;
        }

        .step-head-text span {
            width: 33.33%;
            text-align: center;
        }

        .step-head-text span:nth-child(1) {
            float: left;
            text-align: left;
        }

        .step-head-text span:nth-child(2) {
            float: left;
        }

        .step-head-text span:nth-child(3) {
            float: right;
            text-align: right;
        }

        .field-box {
            background: #fff;
            padding-top: 14px;
            padding-bottom: 20px;
        }

        .id-title {
            font-size: 13px;
            color: #3c3c3c;
            margin: 0 14px 14px 14px;
        }

        .id-card-box {
            padding: 0 16px;
            overflow: hidden;
        }

        .id-card {
            width: 46%;
            position: relative;
            padding: 13px 17px 32px 17px;
            float: left;
            background: #f5f8ff;
            border-radius: 6px;
            overflow: hidden;
            box-sizing: border-box;
        }

        .id-img-back {
            width: 100%;
        }

        .id-img {
            position: relative;
            background-size: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .imgenter {
            position: absolute;
            width: 82%;
            height: 82%;
            top: 9%;
            left: 9%;
            bottom: 9%;
        }

        .id-p {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            line-height: 26px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            background: #67abff;
        }

        .file {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
        }

        .prompt {
            font-size: 13px;
            color: #3c3c3c;
            margin: 14px;
            padding-left: 17px;
            background: url('../../image/audit/warning.png') no-repeat left center;
            background-size: 11px;
        }

        .rules-box {
            padding: 0 14px;
        }

        .rules-box img {
            width: 100%;
        }

        .step-btn {
            width: 80%;
            margin-left: 10%;
            margin-top: 57px;
            height: 46px;
            border-radius: 46px;
            background: -webkit-linear-gradient(to right, #fe8549, #ff524e);
            background: -o-linear-gradient(to right, #fe8549, #ff524e);
            background: -moz-linear-gradient(to right, #fe8549, #ff524e);
            background: linear-gradient(to right, #fe8549, #ff524e);
            /*box-shadow: 0 5px 10px 5px rgba(254, 124, 24, 0.1);*/
            font-size: 17px;
            color: #fff;
            text-align: center;
            line-height: 46px;
        }
    </style>
</head>

<body>
    <div id="cell" v-cloak>
        <div class="stepbox">
            <div class="step-head">
                <div class="step-img">
                    <img src="../../image/audit/step22.png">
                </div>
                <p class="step-head-text">
                    <span>信息认证</span>
                    <span>身份提交</span>
                    <span>上传照片</span>
                </p>
            </div>
            <div class="field-box">
                <p class="id-title">请上传您的身份证正反面照片</p>
                <div class="id-card-box">
                    <div class="id-card">
                        <!-- <input class="file" ref="idpositive" type="file" @change="getzImg()" accept="image/*" multiple=“false” @click="interCamera"> -->
                        <div class="id-img" @click="postpig('z')">
                            <img class="id-img-back" src="../../image/audit/idwrap.png" accept="image/*">
                            <img :src="idimg1" class="imgenter">
                        </div>
                        <p class="id-p">点击上传身份证正面</p>
                    </div>
                    <div class="id-card" style="float: right;">
                        <!-- <input class="file" ref="idreverse" type="file" @change="getfImg()" accept="image/*" multiple=“false” @click="interCamera"> -->
                        <div class="id-img" @click="postpig('f')">
                            <img class="id-img-back" src="../../image/audit/idwrap.png">
                            <img :src="idimg2" class="imgenter">
                        </div>
                        <p class="id-p">点击上传身份证反面</p>
                    </div>
                </div>
                <p class="prompt">注意事项</p>
                <div class="rules-box">
                    <img src="../../image/audit/rules.png">
                </div>
            </div>
            <p class="step-btn" @click="handlerSub">下一步</p>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/aui-toast.js"></script>
<script src="../../script/jquery.min.js"></script>
<script>
    apiready = function() {
        FastClick.attach(document.body);
        header = $api.byId('header');
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);
        var toast = new auiToast();
        let img1 = '../../image/audit/idpositive.png'
        let img2 = '../../image/audit/idreverse.png'
        var vm = new Vue({
            el: '#cell',
            data: {
                idimg1: img1,
                idimg2: img2,
                imgdata1: '',
                imgdata2: ''
            },
            methods: {
                postpig(type) {
                    var that = this
                    var resultList = api.hasPermission({
                        list: ['camera']
                    })
                    if (resultList[0].granted === 0) {
                        api.alert({
                            msg: '当前没有进行相机授权，请在设置中重新打开相机授权！'
                        }, function(ret, err) {
                            api.requestPermission({
                                list: ['camera', 'contacts'],
                                code: 1
                            }, function(ret, err) {
                                // api.alert({
                                //     msg: JSON.stringify(ret)
                                // });
                            });
                        })
                    } else {
                        api.actionSheet({
                            title: '上传图片',
                            cancelTitle: '取消',
                            buttons: ['拍照', '从手机相册选择']
                        }, function(ret, err) {
                            if (ret) {
                                that.getPicture(ret.buttonIndex, type);
                            }
                        });
                    }
                },
                getPicture(sourceType, type) {
                    var that = this
                    if (sourceType === 1) {
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'base64',
                            allowEdit: false,
                            quality: 50,
                            targetWidth: 500,
                            saveToPhotoAlbum: false
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.base64Data) {
                                    if (type === 'z') {
                                        that.idimg1 = ret.base64Data
                                    } else {
                                        that.idimg2 = ret.base64Data
                                    }
                                }

                            }
                        });
                    } else if (sourceType == 2) {
                        api.getPicture({
                            sourceType: 'library',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'base64',
                            allowEdit: false,
                            quality: 50,
                            targetWidth: 500,
                            saveToPhotoAlbum: false
                        }, function(ret, err) {
                          if (ret) {
                            if (ret.base64Data) {
                                if (type === 'z') {
                                    that.idimg1 = ret.base64Data
                                } else {
                                    that.idimg2 = ret.base64Data
                                }
                            }
                          }

                        });
                    }
                },
                interCamera() {
                    var resultList = api.hasPermission({
                        list: ['camera']
                    })
                    if (resultList[0].granted === 0) {
                        api.alert({
                            msg: '当前没有进行相机授权，请在设置中重新打开相机授权！'
                        }, function(ret, err) {
                            api.requestPermission({
                                list: ['camera', 'contacts'],
                                code: 1
                            }, function(ret, err) {
                                // api.alert({
                                //     msg: JSON.stringify(ret)
                                // });
                            });
                        })
                    } else {
                        // alert('tt')
                    }
                },
                handlerSub() {
                    var that = this;
                    if (that.idimg1 === '../../image/audit/idpositive.png') {
                        $api.confirm('请选择身份证正面')
                        return false
                    } else if (that.idimg2 === '../../image/audit/idreverse.png') {
                        $api.confirm('请选择身份证反面')
                        return false
                    }
                    toast.loading({
                        title: "加载中",
                        duration: 2000
                    });
                    $.ajax({
                        type: "post",
                        url: "http://xhf.8jieyun.com/identityInfo/idPhoto",
                        dataType: 'json',
                        data: {
                            did: '12345678-9012-3456-7890-123456789012',
                            phone: $api.getStorage('phone2'),
                            idCardFrontPhoto: that.idimg1,
                            idCardBackPhoto: that.idimg2,
                        },
                        success: function(data) {
                            if (data.code === 10200) {
                                api.openWin({
                                    name: 'wrapthree',
                                    url: 'wrapthree.html'
                                });
                            } else {
                                alert(data.msg)
                            }
                            toast.hide();
                        },
                        error: function(data) {
                            toast.hide();
                        }
                    });
                },
                getzImg() {
                    var that = this
                    var file = that.$refs.idpositive.files[0];
                    // alert('原来'+'='+file.size)
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                            that.idimg1 = e.target.result
                            that.dealImage(e.target.result, 800, function(base64) {
                                that.imgdata1 = base64
                            });
                        }
                        // that.dealImage(that.idimg1, 800, function(base64) {
                        //     that.imgdata1 = base64
                        // });
                        // var img1 = that.dealImage(that.idimg1, 800)
                },
                getfImg() {
                    var that = this
                    var file = that.$refs.idreverse.files[0];
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        that.idimg2 = e.target.result
                        that.dealImage(e.target.result, 800, function(base64) {
                            that.imgdata2 = base64
                        });
                    }

                },
                dataURLtoFile(dataurl, filename) { //将base64转换为文件
                    var arr = dataurl.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    return new File([u8arr], filename, {
                        type: mime
                    });
                },
                dealImage(base64, w, callback) {
                    var newImage = new Image();
                    var quality = 0.6; //压缩系数0-1之间
                    newImage.src = base64;
                    newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
                    var imgWidth, imgHeight;
                    newImage.onload = function() {
                        imgWidth = this.width;
                        imgHeight = this.height;
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        if (Math.max(imgWidth, imgHeight) > w) {
                            if (imgWidth > imgHeight) {
                                canvas.width = w;
                                canvas.height = w * imgHeight / imgWidth;
                            } else {
                                canvas.height = w;
                                canvas.width = w * imgWidth / imgHeight;
                            }
                        } else {
                            canvas.width = imgWidth;
                            canvas.height = imgHeight;
                            quality = 0.6;
                        }
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                        var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
                        // return base64;
                        callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
                    }
                },

                //使用压缩
                // dealImage(oldBase64, 800, printing);

                printing(base64) {
                    alert(base64.length)
                }
            },
            mounted: function() {

            }
        })
    }
</script>

</html>
